<ion-header>
        <ion-toolbar color="light">
            <ion-buttons start >
                <button ion-button icon-only navPop>
                    <ion-icon name="arrow-back" ></ion-icon>
                </button>
            </ion-buttons>
            <ion-title>{{ 'post.Post' | translate }}</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
         <div class="upload-component">
            <div class="upload-container upload-photo" (click)="logoSelect()" [style.background-image]="logo ? 'url(' + logo +')' : ''">
                <span *ngIf="!logo">
                    <i class="iconfont icon-post_photo"></i>
                    <p>{{ 'post.upphoto' | translate }}</p>
                </span>
            </div>
            <div class="upload-photo-more">
                <span class="add" (click)="imgSelect()">
                    <i class="iconfont icon-post_add"></i>
                </span>
                <span class="img_display" *ngFor="let item of logos;let i = index" [style.background-image]="'url('+ src + item +')'" (click)="delImg(i)">
                    <i class="iconfont icon-login_down" ></i>
                </span>
            </div>
            <!-- <div class="upload-container upload-360" (click)="logoSelect(false)" [style.background-image]="full_logo ? 'url('+ full_logo +')' : ''">
                <span *ngIf="!full_logo">
                    <i class="iconfont icon-post_camera"></i>
                    <p>{{ 'post.up360' | translate }}</p>
                </span>
            </div> -->
            <div class="upload-container upload-video">
                <video *ngIf="video" fullscreen="fullscreen" autoplay="true" (ended)="videoEnded()" controls>
                    <source [src]="video" type="video/mp4">
                </video>
                <span *ngIf="!video" (click)="chooseVideo()">
                    <i class="iconfont icon-detail_video"></i>
                    <p>{{ 'post.uv' | translate }}</p>
                </span>
            </div>
         </div>
         <div class="content-form">
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'post.aoauto' | translate }}</ion-label>
                    <ion-toggle [(ngModel)]="info.autoorder"></ion-toggle>
                </ion-item>
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'post.ats' | translate }}</ion-label>
                    <ion-toggle [(ngModel)]="info.share"></ion-toggle>
                </ion-item>
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'post.pt' | translate }}</ion-label>
                    <ion-select [(ngModel)]="info.type"  okText="Okay" cancelText="Dismiss">
                        <ion-option value="4">{{ 'input.Any' | translate }}</ion-option>
                        <ion-option value="1">{{ 'input.Shared' | translate }}</ion-option>
                        <ion-option value="2">{{ 'input.Flat' | translate }}</ion-option>
                        <ion-option value="3">{{ 'input.House' | translate }}</ion-option>
                    </ion-select>
                </ion-item>
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'post.Floor' | translate }}</ion-label>
                    <ion-select [(ngModel)]="info.floor" placeholder="floor">
                        <ion-option>1</ion-option><ion-option>2</ion-option><ion-option>3</ion-option><ion-option>4</ion-option><ion-option>5</ion-option><ion-option>6</ion-option>
                        <ion-option>7</ion-option><ion-option>8</ion-option><ion-option>9</ion-option><ion-option>10</ion-option><ion-option>11</ion-option><ion-option>12</ion-option>
                        <ion-option>13</ion-option><ion-option>14</ion-option><ion-option>15</ion-option><ion-option>16</ion-option><ion-option>17</ion-option><ion-option>18</ion-option>
                        <ion-option>19</ion-option><ion-option>20</ion-option><ion-option>21</ion-option><ion-option>22</ion-option><ion-option>23</ion-option><ion-option>24</ion-option>
                        <ion-option>25</ion-option><ion-option>26</ion-option><ion-option>27</ion-option><ion-option>28</ion-option><ion-option>29</ion-option><ion-option>30</ion-option>
                        <ion-option>31</ion-option><ion-option>32</ion-option><ion-option>33</ion-option><ion-option>34</ion-option><ion-option>35</ion-option><ion-option>36</ion-option>
                    </ion-select>
                    <ion-select [(ngModel)]="info.total_floor" placeholder="Total floor">
                        <ion-option>1</ion-option><ion-option>2</ion-option><ion-option>3</ion-option><ion-option>4</ion-option><ion-option>5</ion-option><ion-option>6</ion-option>
                        <ion-option>7</ion-option><ion-option>8</ion-option><ion-option>9</ion-option><ion-option>10</ion-option><ion-option>11</ion-option><ion-option>12</ion-option>
                        <ion-option>13</ion-option><ion-option>14</ion-option><ion-option>15</ion-option><ion-option>16</ion-option><ion-option>17</ion-option><ion-option>18</ion-option>
                        <ion-option>19</ion-option><ion-option>20</ion-option><ion-option>21</ion-option><ion-option>22</ion-option><ion-option>23</ion-option><ion-option>24</ion-option>
                        <ion-option>25</ion-option><ion-option>26</ion-option><ion-option>27</ion-option><ion-option>28</ion-option><ion-option>29</ion-option><ion-option>30</ion-option>
                        <ion-option>31</ion-option><ion-option>32</ion-option><ion-option>33</ion-option><ion-option>34</ion-option><ion-option>35</ion-option><ion-option>36</ion-option>
                    </ion-select>
                </ion-item>
                <ion-item-divider class="hc-ion-item " color="light" (click)="alert_sign=true">
                    <ion-label stacked>{{ 'post.Address' | translate }} <font style="color:red">*</font></ion-label>
                    <ion-textarea placeholder="Belsize Road, London NW6" [(ngModel)]="info.address" readonly="true" (focus)="alert_sign=true"></ion-textarea>
                </ion-item-divider>
                <div class="hc-form-item noborder">
                    <ion-label color="main">{{ 'post.avd' | translate }}</ion-label>
                    <div class="hc-input-container-2">
                        <ion-datetime displayFormat="YYYY-MM-DD" placeholader="Start day" [(ngModel)]="info.renting_starttime" min="2018" max="2040"></ion-datetime>
                        <span class="line"></span>
                        <ion-datetime displayFormat="YYYY-MM-DD" placeholader="End day" [(ngModel)]="info.renting_endtime" [min]="info.top_starttime || 2018"  max="2040"></ion-datetime>
                    </div>
                </div>
                <div class="hc-form-item noborder">
                    <div class="furniture">
                        <i class="iconfont icon-detail_sofa"></i>
                        <input type="text" [(ngModel)]="info.living">
                    </div>
                    <div class="furniture">
                        <i class="iconfont icon-detail_bed"></i>
                        <input type="text" [(ngModel)]="info.bedroom">
                    </div>
                    <div class="furniture" >
                        <i class="iconfont icon-bad"></i>
                        <input type="text" [(ngModel)]="info.bathroom">
                    </div>
                </div>
                <div class="hc-form-item noborder">
                    <ion-label color="main">{{ 'post.ba' | translate }} <font style="color:red">*</font></ion-label>
                    <div class="hc-input-container-2">
                        <input type="number" [(ngModel)]="info.area">
                        <div class="type-radio-group">
                            <label class="input-radio ml" for="type_one">
                                <input id="type_one" type="radio" name="type" value="2" [(ngModel)]="info.area_unit">
                                <span><b></b></span>
                                <font>㎡</font>
                            </label>
                            <label class="input-radio ml" for="type_two">
                                <input id="type_two" type="radio" name="type" value="1" [(ngModel)]="info.area_unit">
                                <span><b></b></span>
                                <font>sq.ft</font>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="hc-form-item noborder">
                    <ion-label color="main">{{ 'post.Rent' | translate }} <font style="color:red">*</font></ion-label>
                    <div class="hc-input-container-2">
                        <div class="type-radio-group">
                            <label class="input-radio mr" for="type_one">
                                <input id="type_one" type="radio" name="rent" value="1" [(ngModel)]="info.price_unit">
                                <span><b></b></span>
                                <font>£</font>
                            </label>
                            <label class="input-radio mr" for="type_two">
                                <input id="type_two" type="radio" name="rent" value="3" [(ngModel)]="info.price_unit">
                                <span><b></b></span>
                                <font>$</font>
                            </label>
                            <label class="input-radio mr" for="type_three">
                                <input id="type_three" type="radio" name="rent" value="2" [(ngModel)]="info.price_unit">
                                <span><b></b></span>
                                <font>€</font>
                            </label>
                            <label class="input-radio mr" for="type_four">
                                <input id="type_four" type="radio" name="rent" value="4" [(ngModel)]="info.price_unit">
                                <span><b></b></span>
                                <font>¥</font>
                            </label>
                        </div>
                        <input type="number" [(ngModel)]="info.price">
                    </div>
                </div>
                <div class="hc-form-item noborder">
                    <div class="hc-input-container-2">
                        <div class="type-radio-group">
                            <label class="input-radio mr" for="type_1">
                                <input id="type_1" type="radio" value="1" name="price_type" [(ngModel)]="info.price_type">
                                <span><b></b></span>
                                <font>{{ 'post.Month' | translate }}</font>
                            </label>
                            <label class="input-radio mr" for="type_2">
                                <input id="type_2" type="radio" value="2"  name="price_type" [(ngModel)]="info.price_type">
                                <span><b></b></span>
                                <font>{{ 'post.Week' | translate }}</font>
                            </label>
                            <label class="input-radio mr" for="type_3">
                                <input id="type_3" type="radio" value="3"  name="price_type" [(ngModel)]="info.price_type">
                                <span><b></b></span>
                                <font>{{ 'post.Day' | translate }}</font>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="hc-form-item noborder">
                    <ion-label color="main">{{ 'post.Deposit' | translate }}</ion-label>
                    <div class="hc-input-container-2">
                        <div class="type-radio-group">
                            <label class="input-radio mr" for="deposit_one">
                                <input id="deposit_one" type="radio" name="deposit_unit" [(ngModel)]="info.deposit_unit" value="1">
                                <span><b></b></span>
                                <font>£</font>
                            </label>
                            <label class="input-radio mr" for="deposit_two">
                                <input id="deposit_two" type="radio" name="deposit_unit" [(ngModel)]="info.deposit_unit"  value="3">
                                <span><b></b></span>
                                <font>$</font>
                            </label>
                            <label class="input-radio mr" for="deposit_three">
                                <input id="deposit_three" type="radio" name="deposit_unit" [(ngModel)]="info.deposit_unit"  value="2" >
                                <span><b></b></span>
                                <font>€</font>
                            </label>
                            <label class="input-radio mr" for="deposit_four">
                                <input id="deposit_four" type="radio" name="deposit_unit" [(ngModel)]="info.deposit_unit"  value="4" >
                                <span><b></b></span>
                                <font>¥</font>
                            </label>
                        </div>
                        <input type="number"  [(ngModel)]="info.deposit" >
                    </div>
                </div>
                
                <div class="hc-form-item noborder">
                    <div class="button-group">
                        <label class="button display-2" for="dep_1"><input type="radio" name="deposit_save" id="dep_1" value="-1" [(ngModel)]="info.deposit_save"><font>{{ 'post.nodp' | translate }}</font> </label>
                        <label class="button display-2" for="dep_2"><input type="radio" name="deposit_save" id="dep_2" value="1" [(ngModel)]="info.deposit_save"><font>{{ 'post.inpro' | translate }}</font></label>
                    </div>
                    
                </div>
                <div class="hc-form-item noborder">
                    <ion-label color="main">{{ 'post.ofee' | translate }}</ion-label>
                    <div class="hc-input-container-2">
                        <div class="type-radio-group">
                            <label class="input-radio mr" for="other_unit">
                                <input type="radio" name="other_unit" value="1" [(ngModel)]="info.other_unit">
                                <span><b></b></span>
                                <font>£</font>
                            </label>
                            <label class="input-radio mr" for="other_unit">
                                <input type="radio" name="other_unit" value="3" [(ngModel)]="info.other_unit">
                                <span><b></b></span>
                                <font>$</font>
                            </label>
                            <label class="input-radio mr" for="other_unit">
                                <input type="radio" name="other_unit" value="2" [(ngModel)]="info.other_unit">
                                <span><b></b></span>
                                <font>€</font>
                            </label>
                            <label class="input-radio mr" for="other_unit">
                                <input type="radio" name="other_unit" value="4" [(ngModel)]="info.other_unit">
                                <span><b></b></span>
                                <font>¥</font>
                            </label>
                        </div>
                        <input type="number" [(ngModel)]="info.other_price">
                    </div>
                </div>
                <ion-item-divider class="hc-ion-item " color="light">
                    <ion-label stacked>{{ 'post.bfc' | translate }}</ion-label>
                    <ion-textarea placeholder="200 pounds property management" [(ngModel)]="info.other_description"></ion-textarea>
                </ion-item-divider>
                <div class="hc-form-item noborder">
                    <ion-label color="main">{{ 'post.Furnishing' | translate }}</ion-label>
                    <div class="button-group">
                        <label class="button display-2" for="furnished_1"><input type="radio" name="furnished_1" value="1" [(ngModel)]="info.house_conf"><font>{{ 'post.Furnished' | translate }}</font> </label>
                        <label class="button display-2" for="furnished_2"><input type="radio" name="furnished_2" value="2" [(ngModel)]="info.house_conf"><font>{{ 'post.Partially' | translate }}</font></label>
                        <label class="button display-2" for="furnished_3"><input type="radio" name="furnished_3" value="3" [(ngModel)]="info.house_conf"><font>{{ 'post.Unfurnished' | translate }}</font></label>
                    </div>
                    <div class="hc-input-container-2 ">
                        <div class="type-radio-group full">
                            <label class="input-radio col-2" for="funish_option" *ngFor="let item of funish_options">
                                <input type="checkbox" name="funish_option" value="{{item.id}}" [(ngModel)]="item.checked" (change)="furniture()">
                                <span><b></b></span>
                                <font [class]="item.ngclass" ><i>{{ item.text }}</i> </font>
                            </label>
                        </div>
                    </div>
                </div>
        </div>
        <div class="content-form">
            <ion-item class="hc-ion-select trInput">
                       
                <ion-label color="main">{{ 'Contact.Name' | translate }} <font style="color:red">*</font></ion-label>
                <ion-input type="text" [(ngModel)]="info.owner_name"></ion-input>
            </ion-item>
            <ion-item class="hc-ion-select trInput">
                <ion-label color="main">{{ 'Contact.Email' | translate }} <font style="color:red">*</font></ion-label>
                <ion-input type="text" [(ngModel)]="info.owner_email"></ion-input>
            </ion-item>
            <ion-item class="hc-ion-select trInput">
                <ion-label color="main">{{ 'post.Tel' | translate }}</ion-label>
                <ion-input type="text" [(ngModel)]="info.owner_tel"></ion-input>
            </ion-item>
            <ion-item class="hc-ion-select">
                <ion-label color="main">{{ 'post.sp' | translate }}</ion-label>
                <ion-toggle [(ngModel)]="info.is_share_info"></ion-toggle>
            </ion-item>
            <ion-item class="hc-ion-select">
                <ion-label color="main">{{ 'post.po' | translate }}</ion-label>
                <ion-toggle [(ngModel)]="info.stu_in"></ion-toggle>
            </ion-item>
            <ion-item class="hc-ion-select">
                <ion-label color="main">{{ 'post.pf' | translate }}</ion-label>
                <ion-toggle  [(ngModel)]="info.pet_in"></ion-toggle>
            </ion-item>
            <ion-item class="hc-ion-select">
                <ion-label color="main">{{ 'post.Accept' | translate }}</ion-label>
                <ion-select [(ngModel)]="info.people_in"  okText="Okay" cancelText="Dismiss">
                    <ion-option value="1">{{ 'input.Any' | translate }}</ion-option>
                    <ion-option value="2">{{ 'input.Male' | translate }}</ion-option>
                    <ion-option value="3">{{ 'input.Female' | translate }}</ion-option>
                    <ion-option value="4">{{ 'input.Couple' | translate }}</ion-option>
                    <ion-option value="5">{{ 'input.Gay' | translate }}</ion-option>
                </ion-select>
            </ion-item>
            <ion-item class="hc-ion-select">
                <ion-label color="main">{{ 'filter.bi' | translate }}</ion-label>
                <ion-toggle [(ngModel)]="info.bill"></ion-toggle>
            </ion-item>
            <ion-item-divider class="hc-ion-item " color="light">
                <ion-label stacked>{{ 'post.Description' | translate }}</ion-label>
                <ion-textarea [(ngModel)]="info.description" placeholder=""></ion-textarea>
            </ion-item-divider>
        </div>
        <!-- <div class="premium-listing">
            <div class="type-radio-group">
                <label class="input-radio mr" for="isTop">
                    <input type="radio" name="isTop" [(ngModel)]="info.top_status">
                    <span><b></b></span>
                    <font style="font-size:1.4rem;">&nbsp;&nbsp;{{ 'post.Uplist' | translate }}(£{{pre_price}}/day)</font>
                </label>
            </div>
            <div class="premium-listing-date">
                <label for="">{{ 'filter.sd' | translate }}</label>
                <span>
                    <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="info.top_starttime" min="2018" max="2040"></ion-datetime>
                    <font class="iconfont icon-post_calendar"></font>
                </span>
            </div>
            <div class="premium-listing-date">
                <label for="">{{ 'filter.ed' | translate }}</label>
                <span>
                    <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="info.top_endtime" [min]="info.top_starttime || 2017"  max="2040"></ion-datetime>
                    <font class="iconfont icon-post_calendar"></font>
                </span>
            </div>
            <p>{{ 'post.td' | translate }}: 0,{{ 'post.Cost' | translate }}: 0</p>
        </div> -->
        <button class="postBtn" ion-button (click)="submit()">{{ 'post.Post' | translate }}</button>
        <div class="footer-img img-container">
            <img [src]="advertising" alt="">
        </div>
    </ion-content>
    <div class="alert-cell" [class.active]="alert_sign">
        <div style="position: relative;">
            <div class="input-container">
                <div class="input">
                    <input type="text" readonly [(ngModel)]="info.address">
                    <ul *ngIf="addresslist.length>0">
                        <li *ngFor="let item of addresslist" (click)="info.address=item.vicinity?item.vicinity+item.name:item.name;info.latitude=item.geometry.location.lat;info.longitude=item.geometry.location.lng;addresslist=[];">{{item.vicinity+item.name}}</li>
                    </ul>
                </div>
                <button type="button" (click)="alert_sign=false">Ok</button>
            </div>
        </div>
        
        <div id="map" #map></div>
    </div>